<template>
	<view class="layout bg">
		<view class="header">
			<uv-navbar title="发布动态" :placeholder="true" @leftClick="leftClick"></uv-navbar>
		</view>
		<view class="container">
			<view class="box">
				<view class="upload">
					<uv-upload :fileList="fileList" name="1" multiple :maxCount="9" @afterRead="afterRead"
						:previewFullImage="true" @delete="deletePic"></uv-upload>
				</view>
				<view class="title">
					<uv-input v-model="form.title" :fontSize="20" border="none" :maxlength="20" placeholder="添加标题"
						clearable></uv-input>
				</view>
				<view class="content">
					<uv-textarea v-model="form.content" :height="200" :textStyle="{fontSize:32+'rpx'}"
						:customStyle="{padding:0}" border="none" count :maxlength="500"
						placeholder="添加正文"></uv-textarea>
				</view>
			</view>
			<view class="location">
				<view class="address">
					<uv-cell icon="map" :title="form.address" :border="false" isLink
						@click="onChooseLocation"></uv-cell>
				</view>
			</view>
			<view class="tag">
				<view class="title">
					选择标签
				</view>
				<view class="content">
					<uv-tags v-for="(item,index) in form.tags" :text="item.content" borderColor="#ff2442" color="#ff2442"
						plain size="mini" :name="index" :key="item.id" closable @close="onCloseTags"></uv-tags>
					<view class="one">
						<uv-tags icon="plus" borderColor="#ff2442" bgColor="#ff2442" color="#ff2442" size="mini"
							@click="onAddTags">
						</uv-tags>
					</view>
				</view>
			</view>
			<view class="button">
				<view class="draft" @click="onSaveDraft">
					<view class="icon">
						<uv-icon name="empty-favor" size="20"></uv-icon>
					</view>
					<view class="text">
						存草稿
					</view>
				</view>
				<view class="send">
					<uv-button text="发送动态" color="#ff2442" @click="onSend"></uv-button>
				</view>
			</view>
		</view>
		<uv-popup mode="bottom" :z-index="10075" ref="popup">
			<view class="popup-layout">
				<uv-search v-model="keyword" placeholder="请输入标签" @search="onSearchTag"
					@custom="onSearchTag"></uv-search>
				<view class="list">
					<uv-list v-if="tagsList.length>0">
						<uv-list-item v-for="item in tagsList" :title="item.content" :key="item.id" clickable
							@click="onTouchItem(item)"></uv-list-item>
					</uv-list>
					<uv-empty v-else mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref,
		toRefs
	} from "vue";
	import {
		apiPublishBlog,
		apiUploadBlogPicture,
	} from "../../../urls/blog";
	import {
		apiSearchAndAddTag
	} from "@/urls/tags/index.js"

	const keyword = ref("");
	const fileList = ref([]);
	const form = ref({
		title: "这是标题",
		content: "这是一段很长的内容，这是一段很长的内容，这是一段很长的内容，这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容这是一段很长的内容",
		longitude: 0.0,
		latitude: 0.0,
		address: "标记地点",
		fullAddress: "",
		imageIds: [],
		tags: []
	});
	const leftClick = () => {
		uni.switchTab({
			url: "/pages/home/home"
		})
	}

	const afterRead = async (event) => {
		let lists = [].concat(event.file);
		let fileListLen = fileList.value.length;
		lists.forEach(item => {
			fileList.value.push({
				...item,
				status: "uploading",
				message: "上传中"
			})
		})
		for (let item of lists) {
			const result = await apiUploadBlogPicture(item.url);
			let current = fileList.value[fileListLen];
			fileList.value.splice(fileListLen, 1, Object.assign(current, {
				status: "success",
				message: "上传成功",
				id: result.data.id,
			}));
			fileListLen++;
		}

	}

	const deletePic = (event) => {
		console.log(event);
		const index = event.index;
		fileList.value.splice(index, 1);
	}

	const onChooseLocation = async () => {
		const {
			longitude,
			latitude,
			name,
			address
		} = await uni.chooseLocation();
		form.value.address = name;
		form.value.fullAddress = address;
		form.value.longitude = longitude;
		form.value.latitude = latitude;
		console.log(name, address);
	}

	const onCloseTags = (index) => {
		form.value.tags.splice(index, 1);
	}
	const onAddTags = () => {
		popup.value.open();
	}
	const onSend = () => {
		const {
			title,
			content,
			imageIds
		} = form.value;
		// 1.校验标题
		if (!title) {
			uni.showToast({
				title: "请输入标题",
				icon: "none"
			})
			return;
		}
		// 2.校验内容
		if (!content) {
			uni.showToast({
				title: "请输入内容",
				icon: "none"
			})
			return;
		}
		// 先将文件列表转为图片id集合
		fileList.value.forEach(item => {
			if (item.status === "success") {
				form.value.imageIds.push(item.id)
			}
		})
		// 3.校验是否上传图片
		if (imageIds.length === 0) {
			uni.showToast({
				title: "至少上传一张图片或视频",
				icon: "none"
			})
			return;
		}
		uni.showLoading({
			title: "发布中...."
		})
		// 上传到服务端
		apiPublishBlog(form.value)
			.then(() => {
				uni.switchTab({
					url: "/pages/home/home"
				})
			})
			.finally(() => {
				uni.hideLoading();
			})
	}
	const popup = ref();
	const onSaveDraft = () => {

	}
	const tagsList = ref([]);
	const onSearchTag = (content) => {
		if (!content) {
			uni.showToast({
				title: "搜索内容不能为空",
				icon: "none"
			})
			return;
		}
		apiSearchAndAddTag(content)
			.then((result) => {
				tagsList.value = result.data;
			})
	}
	const onTouchItem = (item) => {
		const {
			tags
		} = form.value;
		// 插入先检测是否已经存在
		const result = tags.filter(tag => {
			return tag.id === item.id;
		})
		if (result.length === 0) {
			form.value.tags.push(item);
		}
		keyword.value = "";
		tagsList.value = [];
		popup.value.close();
	}
</script>

<style lang="scss" scoped>
	.layout {
		height: 100vh;

		.container {
			padding: 0 30rpx;

			.box {
				background-color: $uni-bg-color;
				padding: 20rpx;
				margin: 30rpx 0;

				.upload {}

				.title {
					padding: 10rpx 0;
					font-size: 40rpx;
					font-weight: 600;

					::v-deep .uv-input__content__prefix-icon {
						margin-right: 0;
					}

					::v-deep .uv-input__content__subfix-icon {
						margin-right: 0;
					}
				}

				.content {
					font-size: 32rpx;

				}
			}

			.location {
				background-color: $uni-bg-color;
				margin-bottom: 30rpx;
				padding: 10rpx 0;

			}

			.tag {
				background-color: $uni-bg-color;
				margin-bottom: 30rpx;
				padding: 20rpx;

				.title {
					font-size: 32rpx;
				}

				.content {
					display: flex;
					align-items: flex-end;

					.one {
						margin-top: 10px;
					}

					::v-deep .uv-tags__icon {
						margin-right: 0;

					}

					::v-deep .uv-icon__icon--primary {
						color: #ff2442;
					}

				}
			}

			.button {
				position: fixed;
				bottom: 30rpx;
				left: 30rpx;
				right: 30rpx;
				background-color: $uni-bg-color;
				padding: 20rpx;
				display: flex;
				border: none;
				display: flex;
				gap: 20rpx;
				align-items: center;

				.draft {
					display: flex;
					flex-flow: column;
					align-items: center;
					gap: 5rpx;

					.icon {
						padding: 10rpx;
						flex: 1;
						border-radius: 50%;
						background-color: $uni-bg-color-grey;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.text {
						font-size: 20rpx;
						color: $uni-text-color-grey;
					}
				}

				.send {
					flex: 1;
				}
			}
		}
	}

	.popup-layout {
		padding: 30rpx;
		min-height: 40vh;

		.list {
			margin-top: 20rpx;
		}
	}
</style>